<template>
  <ul class="provice-wrapper">
    <template v-for="(item, index) in list">
      <li
        :class="tabIndex === index ? 'active' : ''"
        @click="handleTabClick(item, index)"
        class="provice-item"
        :key="item.id"
      >
        {{ item.provice }}
        <template v-if="item.selectedCity.length">
          <!-- list 所有的数据。就会影响所有的数据 -->
          {{ item.selectedCity.length }}
        </template>
      </li>
    </template>
  </ul>
</template>

<script>
export default {
  props: {
    list: {
      type: Array,
    },
    tabIndex: {
      type: Number,
    },
  },
  methods: {
    handleTabClick(item, index) {
      this.$emit('tabIndex', index)
    },
  },
}
</script>

<style lang="scss" scoped>
.provice-wrapper {
  .provice-item {
    height: 35px;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 5px;
    padding: 5px;
    background: #fff;
    border-radius: 5px;
  }
  .active {
    background: gold;
    // color: #fff;
  }
}
</style>
